<template>
	<view class="item" :class="{pending: pending}">
		<view class="left">
			<slot name="left"></slot>
		</view>
		<view class="line" :istyle="`height: ${height}rpx`"  :class="{pending: pending, last: isLast}"></view>
		<view class="middle"  :class="{pending: pending}">
			<view class="text-content" v-if="middleText">{{middleText}}</view>
			<!-- <view class="icon-content" v-else-if="middleIcon">
				<image :src="middleIcon"></image>
			</view> -->
			<view class="content" v-else></view>
		</view>
		<!-- <view class="line"></view> -->
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
export default {
	components: {
	},
	props: {
		middleText: {
			type: String
		},
		pending: {
			type: Boolean
		},
		isLast: {
			type: Boolean
		},
		height: {
			type: Number
		}
	},
	data() {
		return {
		}
	},
	onLoad(e) {
	},
	methods: {
	},
	onShow () {
		// this.initData()
	},
}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		align-items: center;
		// border: 1px solid red;
		// overflow: hidden;
		position: relative;
		.left {
			margin-right: 20rpx;
			flex: 0 0 100rpx;
			// border: 1px solid red;
			.day {
				display: block;
				color: #585858;
				font-size: 24rpx;
				font-weight: bold;
			}
			.time {
				color: #8C8C8C;
				font-size: 20rpx;
			}
		}
		.middle {
			width: 40rpx;
			height: 40rpx;
			flex: 0 0 40rpx;
			box-sizing: border-box;
			border: 3rpx solid #87CC6E;
			margin: 0rpx 0rpx 0rpx 0rpx;
			border-radius: 50%;
			z-index: 0;
			.content {
				width: 100%;
				height: 100%;
				background: #87CC6E;
				// margin: 8rpx auto;
				box-sizing: border-box;
				background: #87CC6E;
				border: 10rpx solid white;
				border-radius: 50%;
				z-index: 2;
			}
			
			.text-content {
				width: 100%;
				height: 100%;
				background: #87CC6E;
				// margin: 8rpx auto;
				box-sizing: border-box;
				background: #87CC6E;
				border-radius: 50%;
				z-index: 2;
				text-align: center;
				color: white;
				font-weight: bold;
				font-size: 24rpx;
			}
			
			.icon-content {
				width: 100%;
				height: 100%;
				background: #87CC6E;
				// margin: 8rpx auto;
				box-sizing: border-box;
				background: #87CC6E;
				border-radius: 50%;
				z-index: 2;
				text-align: center;
				color: white;
				font-weight: bold;
				font-size: 24rpx;
			}
			
			.text-content {
				width: 100%;
				height: 100%;
				background: #87CC6E;
				// margin: 8rpx auto;
				box-sizing: border-box;
				background: #87CC6E;
				border-radius: 50%;
				z-index: 2;
				text-align: center;
				color: white;
				font-weight: bold;
				font-size: 24rpx;
			}
			
			&.pending {
				border: 3rpx solid #DCDCDC;
				
				.content {
					background: #DCDCDC;
				}
			}
		}
		.line {
			height: 100%;
			height: 120rpx;
			min-height: 120rpx;
			width: 3rpx;
			background: #87CC6E;
			position: relative;
			left: 20rpx;
			top: 54rpx;
			// z-index: 0;
			flex: 0 0 3rpx;
			
			&.pending {
				background: #DCDCDC;
			}
			
			&.last {
				background: transparent;
			}
		}
		.right {
			margin-left: 30rpx;
			.title {
				display: block;
				color: #585858;
				font-weight: bold;
			}
			.day {
				color: #8C8C8C;
				font-weight: 500;
				font-size: 24rpx;
			}
		}
	}
</style>
